import { Form, Input, Button, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import { union } from 'lodash';
import { DeleteOutlined } from '@ant-design/icons';

const BatchCoded = ({ visible, title = '请输入商品编码', maxCount = 500, descript, handleCancel, handleOk }) => {
    const [form] = Form.useForm();
    const batchCodedOk = () => {
        form.validateFields().then((val) => {
            const { keyWords } = val;
            if(!keyWords) {
                handleCancel();
                return;
            }
            //通过换行或者逗号分隔并过滤掉空的
            const arr = keyWords.split(/\n|,|，/gi).filter(item => item.replace(/ /g, ''));
            const item = union(arr).join(',');
            handleOk(item);
            form.resetFields();
          });
    }
    const checkKeyWords = (_, value) => {
        const formatStr = value.replace(/(,|，)+/g, '\n').replace(/(\w)-(\d+)-(\d+)-/g, '$1'),
        arr1 = formatStr.split('\n').filter(item=>item.trim());
        console.log(arr1);
        if(arr1.length > maxCount) {
            return Promise.reject(new Error('超出字符限制'));
        }else {
            return Promise.resolve();
        }
      };

    return(
        <CommonModal
            title={title}
            visible={visible}
            onOk={batchCodedOk}
            onCancel={handleCancel}
            footer={[
                <div key={'footer'} style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '100%' }}>
                    <Button icon={<DeleteOutlined /> } onClick={() => form.resetFields()}>清空</Button>
                    <div>
                        <Button onClick={handleCancel}>取消</Button>
                        <Button onClick={batchCodedOk} type="primary">确定</Button>
                    </div>
                </div>
            ]}
        >
            <div
                style={{
                margin: '6px 0px 15px 0px',
                backgroundColor: '#EBF4FF',
                padding: '5px 18px 5px 18px',
                borderRadius: '2px',
                }}
            >
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'row',
                        justifyContent: 'space-start',
                    }}
                >
                <div>{descript}</div>
                </div>
            </div>
            <Form form={form}>
                <Form.Item
                label=""
                name="keyWords"
                rules={[
                    {
                        validator: checkKeyWords,
                        message: '超出字符限制',
                    },
                ]}
                >
                <Input.TextArea placeholder={title + '最多支持500行'} style={{ height: 286 }} />
                </Form.Item>
            </Form>
        </CommonModal>
    )
}
export default BatchCoded;